<template>
  <!-- 催收执行页-历史信息模块-电催行动历史 -->
  <section class="component telephone-action-history">
    <!-- 搜索区域 -->
    <data-form :model="searchModel" @onSearch="refreshData" ref="form">
      <template slot="inputs">
        <el-form-item label="行动代码" prop="followupBack">
          <el-select
            clearable
            placeholder="请选择"
            v-model="searchModel.followupBack"
          >
            <el-option
              :key="item.code"
              :label="item.name"
              :value="item.code"
              v-for="item in $dict.getDictData('FollowupBack')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电催人员" prop="operatorRealName">
          <el-input
            clearable
            v-model.trim="searchModel.operatorRealName"
          ></el-input>
        </el-form-item>
        <el-form-item label="电催日期" prop="followTime">
          <el-date-picker v-model="searchModel.followTime" type="daterange">
          </el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box
      :data="dataSet"
      :height="200"
      :page="pageService"
      @onPageChange="refreshData"
    >
      <template slot="columns">
        <el-table-column
          label="电催日期"
          :formatter="row => $filter.dateFormat(row.followTime)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="operatorRealName"
          label="电催人员"
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="custType"
          label="催收对象"
          :formatter="row => $filter.dictConvert(row.custType, 'CustType')"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="targetName"
          label="姓名"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="targetPhone"
          label="电话号码"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          label="行动代码"
          :formatter="
            row => $filter.dictConvert(row.followupBack, 'FollowupBack')
          "
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="checkTime"
          label="承诺还款日"
          :formatter="row => $filter.dateFormat(row.checkTime)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="promiseAmt"
          label="承诺还款金额"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="followContent"
          label="催记描述"
          :min-width="$helper.getColumnWidth(10)"
          show-overflow-tooltip
        >
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";

import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { CASE_CHANNEL } from "~/config/enum.config";

import { namespace } from "vuex-class";

const CollectionExecutionModule = namespace("collection-execution");

@Component
export default class TelephoneActionHistory extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;

  private searchModel: any = {
    followupBack: "",
    operatorRealName: "",
    followTime: []
  };
  private dataSet: any[] = [];
  //重置搜索条件
  private resetSearchFelid() {
    const form: any = this.$refs["form"];
    form.resetForm();
  }
  //获取电催行动历史
  private refreshData() {
    this.searchModel.caseId = this.caseId;
    this.searchModel.followupType = CASE_CHANNEL.tel;
    const params = { ...this.searchModel };
    params.followTimeMin = this.$filter.dateRanageFormat(
      this.searchModel.followTime
    ).start;
    params.followTimeMax = this.$filter.dateRanageFormat(
      this.searchModel.followTime
    ).end;
    delete params.followTime;

    this.caseOperatorPageService
      .caseFollowupRecord(params, this.pageService, this.sortService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private activated() {
    this.refreshData();
  }
}
</script>

<style lang="less" scoped></style>
